<!-- 父组件 -->
<template>
  <div>
    <!-- 使用 Card 组件，并向插槽中插入内容 -->
    <Card>
      <!-- 这里的内容会替换子组件中的 <slot></slot> -->
      <p>这是卡片的自定义内容</p>
      <button>点击我</button>
    </Card>
  </div>
</template>

<!-- result:  
<div class="card">
  <div class="card-header">标题</div>
  <div class="card-body">
    <p>这是卡片的自定义内容</p>
    <button>点击我</button>
  </div>
  <div class="card-footer">底部按钮</div>
</div>
-->

<script>
  import Card from "./Card.vue";
  export default {
    components: {
      Card,
    },
  };
</script>
